<template>
  <div v-if="!loading">
    <!--样式一8-->
    <exhibits1 v-if="props.ModuleId == 8" :info="props.info" :tabDatas="tabDatas" />
    <!--样式二9-->
    <exhibits2 v-if="props.ModuleId == 9" :info="props.info" :tabDatas="tabDatas" />
    <!--样式三7-->
    <exhibits3 v-if="props.ModuleId == 7" :info="props.info" :tabDatas="tabDatas" />
    <!--样式四10-->
    <exhibits4 v-if="props.ModuleId == 10" :info="props.info" :tabDatas="tabDatas" />
    <!--样式五11-->
    <exhibits5 v-if="props.ModuleId == 11" :info="props.info" :tabDatas="tabDatas" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'exhibitsComponent',
});
</script>
<script setup lang="ts">
import { designList11, addExhibits, disassociate, moduleShowpieces } from '@/api/desgin/desgin';
import { ref, reactive, watch } from 'vue';
import exhibits3 from './exhibits3.vue';
import exhibits2 from './exhibits2.vue';
import exhibits4 from './exhibits4.vue';
import exhibits5 from './exhibits5.vue';
import exhibits1 from './exhibits1.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const { styleInfo } = storeToRefs(store);
const tabDatas = ref([]);
const loading = ref(true);
const parmas = reactive({
  projectId: localStorage.getItem('projectId'),
  companyId: -1,
  Id: -1,
  typeId: 0,
  AgeId: 0,
  LevelId: 0,
  SourceId: 0,
  Value: '',
  PageNo: 1,
  PageSize: 10,
});
const props = defineProps({
  ModuleId: {
    type: Number,
  },
  info: {
    type: Object,
  },
});
const num = ref(6);
if (sessionStorage.getItem('tem1Num')) {
  num.value = Number(sessionStorage.getItem('tem1Num'));
}

//console.log('num', num);

const init = async () => {
  try {
    loading.value = true;
    parmas.Id = props.info.id;
    // parmas.PageSize = props.info.number;
    let { data } = await moduleShowpieces(parmas);
    num.value = props.info.number;
    tabDatas.value = data.data.slice(0, num.value);
    loading.value = false;

    //console.log(tabDatas.value, 'tabDatas.value', data.data);
  } catch {
    loading.value = false;
  }
};
init();
watch(
  () => props.info,
  () => {
    //console.log(props.info.id, 'props.info.id');
    num.value = props.info.number;
    init();
  },
  { deep: true, immediate: true },
);

watch(
  () => sessionStorage.getItem('tem1Num'),
  () => {
    num.value = Number(sessionStorage.getItem('tem1Num'));
  },
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped></style>
